<template>
	<view class="main">
		<!--公共头部-->
		<my-header :background="background" title="发起申请"></my-header>

		<view class="main-body-e">
			<u-form :model="form" ref="uForm">
				<!--姓名-->
				<view>
					<u-form-item :required="true" left-icon="chrome-circle-fill" label-width="170" label="姓名："
						prop="name" :left-icon-style="labSty" :label-style="labSty">
						<u-input placeholder="请输入姓名" :custom-style="jinengStyle" v-model="form.name"
							:clearable="false" />
					</u-form-item>
				</view>
				<!--所属账本-->
				<view>
					<u-form-item :required="true" left-icon="chrome-circle-fill" label-width="170" label="所属账本："
						prop="accountBookName" :left-icon-style="labSty" :label-style="labSty" :border-bottom="false">
						<u-input v-model="form.accountBookName" placeholder="请选择账本" :custom-style="jinengStyle"
							type="select" :select-open="zhangbenShow" :border="true" @click="zhangbenShow = true" />
						<u-select v-model="zhangbenShow" mode="mutil-column-auto" :list="zhangbenList"
							@confirm="zhangbenCallback"></u-select>
					</u-form-item>
				</view>
				<!--申请事由-->
				<view>
					<u-form-item :required="true" left-icon="chrome-circle-fill" label-width="170" label="申请事由："
						prop="accountBookName" :left-icon-style="labSty" :label-style="labSty" :border-bottom="false">
						<u-input v-model="form.shiyou" placeholder="请选择事由" :custom-style="jinengStyle" type="select"
							:select-open="shiyouShow" :border="true" @click="shiyouShow = true" />
						<u-select v-model="shiyouShow" mode="mutil-column-auto" :list="shiyouList"
							@confirm="shiyouCallback"></u-select>
					</u-form-item>
				</view>
				<!--申请事由详情-->
				<view>
					<u-form-item :required="true" left-icon="chrome-circle-fill" label-position="top" label="申请事由详情："
						prop="name" :left-icon-style="labSty" :label-style="labSty">
						<u-input placeholder="描述所申请事项理由" :border="true" type="textarea" :custom-style="jinengStyle"
							v-model="form.name" :clearable="false" />
					</u-form-item>
				</view>
				<!--上传申请事由凭证-->
				<view>
					<u-form-item :required="true" left-icon="chrome-circle-fill" label-position="top" label="上传申请事由凭证："
						:left-icon-style="labSty" :label-style="labSty">
					</u-form-item>
					<u-upload ref="uUpload" :action="action" :auto-upload="true" name="image" max-count="6" width="180"
						height="180" :max-size="2 * 1024 * 1024"></u-upload>
				</view>
				<!--选择审批人-->
				<view>
					<u-form-item :required="true" left-icon="chrome-circle-fill" label-position="top" label="选择审批人："
						:left-icon-style="labSty" :label-style="labSty">
					</u-form-item>
					<!--职位详情弹窗-->
					<view>
						<view class="u-model-style">
							<u-time-line>
								<u-time-line-item nodeTop="2">
									<!-- 此处自定义了左边内容，用一个图标替代 -->
									<template v-slot:node>
										<view class="u-node" style="background: #19be6b;">
											<!-- 此处为uView的icon组件 -->
											<u-icon name="pushpin-fill" color="#fff" :size="16"></u-icon>
										</view>
									</template>
									<template v-slot:content>
										<view class="dis_flex jus-con ali-ite">
											<view>
												<view class="u-order-title">审批人</view>
												<view class="u-order-desc">请选择审批人</view>
											</view>
											<view @click="navigateTo('/pages/apply/add-list')">
												<!-- <view>已添加人</view> -->
												<u-icon name="man-add" color="rgba(0, 81, 186, 1)" size="66"></u-icon>
											</view>
										</view>
									</template>
								</u-time-line-item>
							</u-time-line>
							<u-time-line>
								<u-time-line-item nodeTop="2">
									<!-- 此处自定义了左边内容，用一个图标替代 -->
									<template v-slot:node>
										<view class="u-node" style="background: #19be6b;">
											<!-- 此处为uView的icon组件 -->
											<u-icon name="pushpin-fill" color="#fff" :size="16"></u-icon>
										</view>
									</template>
									<template v-slot:content>
										<view class="dis_flex jus-con ali-ite">
											<view>
												<view class="u-order-title">抄送人</view>
												<view class="u-order-desc">请选择抄送人</view>
											</view>
											<view @click="navigateTo('/pages/apply/add-list')">
												<u-icon name="man-add" color="rgba(0, 81, 186, 1)" size="66"></u-icon>
											</view>
										</view>
									</template>
								</u-time-line-item>
							</u-time-line>
						</view>
					</view>
				</view>
				<view class="address" style="margin:30rpx 0 0rpx 0;">
					<button @click="cancel()" type="warn">取消</button>
					<button @click="submit()" style="background:#0051BA" type="primary">提交</button>
				</view>
				<view style="margin-top:20px;">
					<text style="color:red;">温馨提示：红色星为必填项，</text>
					<text style="color:#0051BA;">蓝色星为选填项</text>
				</view>
			</u-form>
		</view>
	</view>
</template>

<script>
	import myHeader from '@/components/workbench/header.vue';
	export default {
		data() {
			return {
				sh : '1',
				background : {
					backgroundColor : '',
				},
				tStyle: {
					fontSize: '28rpx',
					color: 'rgba(0, 81, 186, 1);',
					fontWeight: 'bold'
				},
				rxShow: false,
				tStyle: {
					fontSize: '28rpx',
					color: 'rgba(0, 81, 186, 1);',
					fontWeight: 'bold'
				},
				action: 'https://test.0871.cn/upload/uploadfile_new',
				shiyouShow: false,
				shiyouList: [{
						label: '请假',
						value: 1,
					},
					{
						label: '调休',
						value: 2,
					},
					{
						label: '调岗',
						value: 3,
					},
					{
						label: '晋升',
						value: 4,
					},
					{
						label: '辞职',
						value: 5,
					},
					{
						label: '其他',
						value: 6,
					},
				],
				form: {
					accountBookName: '',
					shiyou: '',
				},
				zhangbenShow: false,
				zhangbenList: [],
				labSty: {
					color: 'rgba(0, 81, 186, 1)',
				},
			}
		},
		components: {
			myHeader,
		},
		onLoad() {
			this.load();
			this.onSelect()
		},
		methods: {
			// 首次查询事件
			async onSelect() {
				let res = await this.asyncPublic('/finance/financeAddWagesOnSelect', 1)
				this.zhangbenList = res.data.account
				this.load_close();
			},
			// 请假事由事件
			shiyouCallback(e) {
				this.form.shiyou = e[0].label
				// this.form.accountBook = e[0].value
			},
			// 所属账本事件
			zhangbenCallback(e) {
				this.form.accountBookName = e[0].label
				// this.form.accountBook = e[0].value
			},
		},
	}
</script>

<style>
	.u-model-style {
		padding: 20px;
	}
	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 26rpx;
	}

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 22rpx;
		margin-bottom: 6rpx;
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}

	.u-model-style {
		padding: 20px;
	}

	.address {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10rpx;
	}

	.address button {
		font-size: 13px;
		width: 140px;
		border-radius: 20px;
	}

	/*表单字体调整*/
	.u-form-item {
		padding: 5px !important;
	}

	.u-input--border {
		height: 60rpx !important;
	}

	.u-input__input {
		font-size: 22rpx !important;
		min-height: 60rpx !important;
	}
</style>
